<template>
  <div class="echarts-outer-wrapper width-410">
    <div @click="nav()" style="cursor: pointer">
      <Title title="税务登记" time="1"></Title>
    </div>
    <div class="top-wrapper">
      <div class="item-wrapper">
        <div class="item-content">
          <div class="icon-wrapper">
            <div class="item-title">本日新增</div>
            <img class="icon" src="~@/assets/images/icon-13.png" />
          </div>
          <div class="num-list">
            <div
              class="num-item red"
              v-for="(item, index) in todayData.brxzhs"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="dw">户</div>
        </div>
      </div>
      <div class="item-wrapper">
        <div class="item-content">
          <div class="icon-wrapper">
            <div class="item-title">本日注销</div>
            <img class="icon" src="~@/assets/images/icon-14.png" />
          </div>
          <div class="num-list">
            <div
              class="num-item green"
              v-for="(item, index) in todayData.brzxhs"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
          <div class="dw">户</div>
        </div>
      </div>
    </div>
    <div class="center-wrapper">
      <img class="icon" src="~@/assets/images/icon-15.png" />
      <div class="label">本年有效管户</div>
      <div class="num">{{ EchartData.zcnsr }}</div>
      <div class="dw">户</div>
    </div>
    <!--  横向进度条-->
    <div class="bottom-wrapper">
      <div class="num-list">
        <div class="num-item">
          <div class="num">{{ EchartData.dwnsr }}</div>
          <div class="dw">户</div>
        </div>
        <div class="num-item">
          <div class="num">{{ EchartData.gtjy }}</div>
          <div class="dw">户</div>
        </div>
      </div>
      <echartCompt v-model="chartOption" class="chart-wrapper"></echartCompt>
      <div class="detail-wrapper">
        <div class="item">
          <div class="dot company"></div>
          <div class="label">单位纳税人</div>
          <div class="num">{{ EchartData.dwzb }}</div>
          <div class="num">%</div>
        </div>
        <div class="item">
          <div class="dot individual"></div>
          <div class="label">个体经营</div>
          <div class="num">{{ EchartData.gtzb }}</div>
          <div class="num">%</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Title from "@/components/title";
// import * as echarts from "echarts";
import { FormateDate } from "@/utils/util.js";

export default {
  inject: ["reload"],
  name: "sstjlef",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: "",
      yearDate: "",
      timer: null,
      EchartData: [],
      todayData: {},
      nextUpdateTime: null,
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    let day = new Date().getDate();
    date = year + "-" + month + "-" + day;
    this.prevDate = date;
    this.yearDate = year;
  },
  computed:{
    chartOption(){
      let _this=this;
      let option = {
        yAxis: {
          data: ["百分比"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        xAxis: {
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        legend: {
          show: false,
        },
        series: [
          {
            name: "单位",
            stack: "1",
            type: "bar",
            itemStyle: {
              color: new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgb(254,131,32)",
                },
                {
                  offset: 1,
                  color: "#C0AA34",
                },
              ]),
              barBorderRadius: [6, 0, 0, 6],
            },
            silent: true,
            barWidth: 12,
            barGap: "-100%", // Make series be overlap
            data: [this.EchartData.dwzb],
          },
          {
            name: "个体",
            stack: "1",
            type: "bar",
            itemStyle: {
              color: new _this.echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "#CCEEFF",
                },
                {
                  offset: 1,
                  color: "#5599FF",
                },
              ]),
              barBorderRadius: [0, 6, 6, 0],
            },
            silent: true,
            barWidth: 12,
            barGap: "-100%", // Make series be overlap
            data: [this.EchartData.gtzb],
          },
        ],
      };
      // this.myChart.setOption(option);
      return option;
    }
  },
  mounted() {
    // this.myChart = echarts.init(document.getElementById("lineChart"));
    this.ajax({
      url: "/dpzsSycxService/sstjzsbQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.yearDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      // this.initEchart();
    });
    //本日新增与注销
    this.getTodayData();
    this.timer = setInterval(() => {
      if (this.nextUpdateTime && this.nextUpdateTime == FormateDate()) {
        this.getTodayData();
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    getTodayData() {
      this.ajax({
        url: "/dpzsSycxService/sstjzsbbrxzzxhQuery",
        method: "post",
        data: {
          param: {
            tjrq: this.prevDate,
          },
        },
      }).then((res) => {
        res = res.data;
        if (res.rtnCode !== "200") {
          this.$message.error(res.rtnMsg);
          return;
        }
        this.todayData = res.data;
        this.nextUpdateTime = res.data.xcsxsj;
        this.reload();
      });
    },
    nav() {
      this.$router.push("/dengji");
    },
   
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 458px;
  height: 314px;
  .top-wrapper {
    margin-top: 12px;
    display: flex;
    justify-content: space-evenly;

    .item-wrapper {
      &:nth-child(1) {
        border-right: 1px solid #ffffff64;
      }
      flex: 1;
      .item-content {
        margin-top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        .icon-wrapper {
          position: relative;
          width: 28px;
          height: 28px;
          .item-title {
            position: absolute;
            top: -32px;
            left: 0;
            width: 100px;
            font-size: 16px;
            color: #ffffff;
          }
          .icon {
            width: 28px;
            height: 28px;
          }
        }

        .num-list {
          margin: 0 2px 0 8px;
          display: flex;
          .num-item {
            margin: 0 1px;
            width: 20px;
            height: 28px;
            line-height: 24px;
            border-radius: 6px;
            font-size: 24px;
            box-sizing: border-box;
            text-align: center;
            color: #ffffff;
          }
          .red {
            border: 2px solid #ff7676;
            background-color: rgba(255, 170, 170, 0.3);
          }
          .green {
            border: 2px solid rgba(51, 255, 166, 1);
            background-color: rgba(51, 255, 166, 0.3);
          }
        }
        .dw {
          font-size: 16px;
          color: #ffffff;
        }
      }
    }
  }
  .center-wrapper {
    margin: 16px 0;
    display: flex;
    height: 50px;
    justify-content: center;
    align-items: center;
    .icon {
      width: 46px;
      height: 42px;
    }
    .label {
      margin: 0 8px 0 6px;
      font-size: 22px;
      color: #ffffff;
    }
    .num {
      font-size: 24px;
      font-weight: 700;
      color: rgba(159, 229, 255, 1);
    }
    .dw {
      margin: 5px 0 0 4px;
      font-size: 14px;
      color: rgba(159, 229, 255, 1);
    }
  }
  .bottom-wrapper {
    .num-list {
      display: flex;
      justify-content: space-evenly;
      .num-item {
        display: flex;
        align-items: flex-end;
        color: rgba(159, 229, 255, 1);
        .num {
          font-size: 26px;
          line-height: 22px;
        }
        .dw {
          font-size: 16px;
          line-height: 16px;
        }
      }
    }
    .chart-wrapper {
      height: 24px;
      margin: 8px 0 4px 0;
    }
    .detail-wrapper {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      .item {
        display: flex;
        justify-content: center;
        align-items: center;
        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 5px;
        }
        .company {
          background: #f88922;
        }
        .individual {
          background: #2ce0ff;
        }
        .label {
          font-size: 17px;
          color: #ffffff;
          margin-right: 8px;
        }
        .num {
          font-size: 17px;
          color: #9fe5ff;
        }
      }
    }
  }
}
</style>
